<template>
	<Modal
		:mask-closable="false"
		v-model="createStatus"
		:title="type == 'check' ? '查看预警' : type == 'edit' ? '编辑预警' : '新建预警'"
		class="modal-content-item-layout pt16"
		@confirm="confirm"
		width="70%"
	>
		<div class="addProject">
			<Form ref="form" class="formList" :model="formItem" :rules="ruleValidate" :disabled="type == 'check'">
				<div class="content-item">
					<div class="pd16">
						<Row :gutter="20">
							<Col span="8">
								<FormItem label="模版类型" prop="templateType">
									<Select v-model="formItem.templateType" :placeholder="`${$t('common.selectInfo')}`" @on-change="modelTypeChange">
										<Option v-for="(item, index) of modelList" v-show="item.show != false" :value="item.value" :key="index" :label="item.label">
										</Option>
									</Select>
								</FormItem>
							</Col>
							<Col span="8">
								<FormItem label="模板名称" prop="templateName">
									<Input icon="ios-clock-outline" v-model="formItem.templateName" />
								</FormItem>
							</Col>
							<Col span="8">
								<FormItem :label="$t('角色')" prop="multipleRoles">
									<Select
										ref="userSelect"
										v-model="formItem.multipleRoles"
										clearable
										multiple
										@on-change="roleChange"
										:max-tag-count="3"
										:disabled="disable == 'roleDisable'"
										:placeholder="`${$t('common.selectInfo')}`"
									>
										<Option v-for="item of roleArr" :value="item.id" :key="item.id" :label="item.name"> </Option>
									</Select>
								</FormItem>
							</Col>
						</Row>
						<Row :gutter="20">
							<Col span="8">
								<FormItem :label="$t('用户')" prop="multipleUser">
									<Select
										v-model="formItem.multipleUser"
										clearable
										multiple
										filterable
										@on-change="userChange"
										:max-tag-count="3"
										:disabled="disable == 'userDisable'"
										:remote-method="searchUserlist"
										:placeholder="`${$t('common.selectInfo')}`"
									>
										<Option v-for="item of userArr" :value="item.id" :key="item.id" :label="item.realname"> </Option>
									</Select>
								</FormItem>
							</Col>
							<Col span="8">
								<FormItem label="计划" prop="planId" v-if="formItem.templateType !== 1">
									<Select v-model="formItem.planId" :placeholder="`${$t('common.selectInfo')}`">
										<Option v-for="item of planList" :value="item.id" :key="item.id" :label="item.planName" @on-change="planChange"> </Option>
									</Select>
								</FormItem>
								<FormItem label="生产进度(%)" prop="productionProgress" v-else>
									<InputNumber
										style="width: 100%"
										:max="1000"
										:min="1"
										type="number"
										v-model="formItem.productionProgress"
										:placeholder="`${$t('common.inputInfo')}`"
									/>
								</FormItem>
							</Col>
							<Col span="8">
								<Row :gutter="12" v-if="formItem.templateType !== 1">
									<Col span="16">
										<FormItem label="提醒时间" prop="reminderTime">
											<InputNumber :precision="0" style="width:100%" v-model="formItem.reminderTime" :placeholder="`${$t('common.inputInfo')}`" />
										</FormItem>
									</Col>
									<Col span="8">
										<FormItem label="单位" prop="reminderMethod">
											<Select v-model="formItem.reminderMethod" :placeholder="`${$t('common.selectInfo')}`">
												<!-- <Option value="1" label="秒"> </Option> -->
												<Option value="2" label="分钟"> </Option>
												<Option value="3" label="小时"> </Option>
												<Option value="4" label="天"> </Option>
											</Select>
										</FormItem>
									</Col>
								</Row>
								<Row :gutter="12" v-else>
									<FormItem label="功能位置" prop="functionalLocation">
										<Cascader clearable :data="orgList" v-model="formItem.functionalLocation" placeholder="请选择功能位置">
										</Cascader>
									</FormItem>
								</Row>
							</Col>
						</Row>
						<Row :gutter="20">
							<Col span="24">
								<FormItem label="备注">
									<Input type="text" v-model="formItem.remarks" :placeholder="`${$t('common.inputInfo')}`" />
								</FormItem>
							</Col>
						</Row>
					</div>
				</div>
			</Form>
		</div>

		<div slot="footer">
			<Button type="default" @click="createStatus = false">{{ $t('common.Cancle') }}</Button>
			<Button type="primary" @click="addOk('form',1)">{{ $t('maintenance.Confirmed') }}</Button>
		</div>
	</Modal>
</template>

<script>
import { getStatusList } from './getStatusList.js';
import rulesMixins from './getValidatePass.js';

export default {
	name: 'addModal',
	mixins: [rulesMixins],
	data() {
		return {
			createStatus: false,
			modelList: getStatusList(),
			formItem: {},
			statusList: [],
			ruleValidate: {
				templateType: [{ required: true, type: 'number', message: `${this.$t('common.selectInfo')}`, trigger: 'change' }],
				multipleRoles: [{ validator: this.roleAndUserPass, trigger: 'blur,change' }],
				multipleUser: [{ validator: this.roleAndUserPass, trigger: 'blur,change' }],
				templateName: [{ required: true, message: '请输入模版名称', trigger: 'blur' }],
				reminderTime: [{ required: true, type: 'number', message: '请输入模版名称', trigger: 'blur' }],
				reminderMethod: [{ required: true, message: '请选择单位', trigger: 'blur' }],
				planId: [{ required: true, message: '请选择计划',type: 'number', trigger: 'blur,change' }],
				productionProgress: [{ required: true, message: '请输入生产进度',type: 'number', trigger: 'blur,change' }],
				functionalLocation: [{ required: true, message: '请选择位置',type: 'array', trigger: 'blur,change' }],
			},
			planList: '',
			type: '',
		};
	},
	mounted() {
		this.searchRole();
		this.searchUser();
	},
	methods: {
		async show(row, type) {
			this.$refs.form.resetFields();
			this.formItem = {
				reminderTime:null,
				productionProgress:null,
			};
			if (row) {
				await this.modelTypeChange(row.templateType);
				this.formItem = { ...row };
			}
			this.type = type;
			this.createStatus = true;
		},
		planChange(val) {
			this.$set(this.formItem, 'planId', val);
			const arg = this.planList.find((item) => item.id === val);
			this.$set(this.formItem, 'planName', arg.planName);
		},
		
		async modelTypeChange(val) {
			this.formItem.templateType = val;
			if (val != 1) {
				const { params, reqParams } = getStatusList()[val - 1];
				await this.getPlanList(reqParams, params);
			}
		},
		async getPlanList(reqParams, params) {
			const data = await this.axios({
				method: 'post',
				url: reqParams.url,
				data: {
					...params,
				},
			});
			this.$set(this, 'planList', data.data[reqParams.res || 'records']);
		},
		
	},
};
</script>

<style lang="scss" scoped></style>